<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <title>title</title>
    <link rel="stylesheet" type="text/css" href="../css/api.css"/>
    <style>
        html, body {
            background-color: #f8f8f8;
        }
        #header {
        	height: 48px;
        	line-height: 48px;
        	background-color: #e62442;
        	color: #fff;
            overflow: hidden;
        }
        #header .header_left {
        	width: 20%;
            height: 100%;
            float: left;
        	padding-left: 18px;
        	box-sizing: border-box;
            display: -webkit-box;
            -webkit-box-align: center;
        }
        #header .header_left img {
        	height: 20px;
        	display: block;
        }
        #header .header_right {
        	width: 80%;
            height: 100%;
            float: left;
        	padding-right: 20%;
        	box-sizing: border-box;
        	font-size: 17px;
        	text-align: center;
        }
        .nav {
        	border-bottom: 1px solid #dfdfdf;
        	background-color: #ffffff;
        	position: relative
        }
        .nav ul {
			overflow: hidden;
        }
        .nav ul li {
        	width: 50%;
        	height: 44px;
        	line-height: 44px;
        	float: left;
        	color: #999;
        	font-size: 14px;
        	text-align: center;
        	position: relative
        }
        .nav ul li .li_box {
        	line-height: 1;
        	display: inline-block;
        }
        .nav ul li .line {
        	width: 1px;
        	height: 17px;
        	display: block;
        	background-color: #999;
        	position: absolute;
        	right: 0;
        	top: 0;
        	bottom: 0;
        	margin: auto;
        }
        .nav ul li.active {
        	color: #333;
        }
        .nav .line_wrap {
	        position: absolute;
	        left: 0;
	        right: 0;
	        bottom: 0;
	    }
	    .nav .line_wrap .line_inner {
	        width: 75px;
	        height: 3px;
	        background-color: #e62442;
	        transform: translateX(0px);
	        -webkit-transform: translateX(0px);
	    }
        .tap_active {
            /*background-color: rgba(0, 0, 0, 0.1);*/
        }
    </style>
</head>
<body>
	<header id="header">
    	<div class="header_left" onclick="api.closeWin();" tapmode="tap_active">
    		<img src="../image/back.png">
    	</div>
    	<div class="header_right">活动管理</div>
    </header>
    <div class="nav" id="nav">
    	<ul>
    		<li class="active" tapmode onclick="fnClick(0);">
    			<div class="li_box">优惠券活动</div>
    			<span class="line"></span>
    		</li>
    		<li tapmode onclick="fnClick(1);">
    			<div class="li_box">满减活动</div>
    		</li>
    	</ul>
    	<div class="line_wrap">
            <div class="line_inner"></div>
        </div>
    </div>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/zepto.js"></script>
<script type="text/javascript">
    apiready = function(){
        $api.fixStatusBar(header);
        api.openFrameGroup({
            name: 'activityManageFrame',
            rect: {
                 x: 0, 
                 y: $('#header').height() + $('#nav').height(), 
                 w: 'auto',
                 h: api.winHeight - $('#header').height() - $('#nav').height()
            },
            scrollEnabled: true,
            frames: [{
                name: 'coupon_activity_frame', 
                url: 'coupon_activity_frame.html',
                bounces: true
            },{
                name: 'full_cut_activity_frame', 
                url: 'full_cut_activity_frame.html',
                bounces: true
            }]
        }, function(ret, err) {
            // if (ret) {
            //     alert(JSON.stringify(ret));
            // } else {
            //     alert(JSON.stringify(err));
            // }
        });

		fnClick(0);
    };

    function fnClick(_index) {
        fnChange(_index);
        api.setFrameGroupIndex({
            name: 'activityManageFrame',
            index: _index
        });
    }

    function fnChange(_index) {
        if (!isNaN(_index)) {
            this_ = $('.nav ul li').eq(_index);
        }
        $('.nav ul li').removeClass('active');
        $(this_).addClass('active');
        var left = $(this_).offset().left + ($(this_).width() - $(this_).children('.li_box').width()) / 2;
        $('.line_inner').width($(this_).children('.li_box').width());
        $('.line_inner').css({
            'transform': 'translateX(' + left + 'px)',
            '-webkit-transform': 'translateX(' + left + 'px)',
            'transition': 'transform 300ms ease-in-out',
            '-webkit-transition': '-webkit-transform 300ms ease-in-out',
        });
    }
</script>
</html>